<template>
  <inject-template :item="item" :pageId="pageId" :popId="popId">
    <template v-slot:common>
      <div class="wb-address" :data-id="item.id" @click.stop>
        <van-cell is-link @click="onShowPopup" :style="adressStyles">{{ address }}</van-cell>
        <van-popup v-model:show="isShowAddress" teleport="body" position="bottom" round>
          <van-area :area-list="areaList" ref="myArea" @confirm="onConfirm" @cancel="onCancel"/>
        </van-popup>
      </div>
    </template>
  </inject-template>
</template>

<script>
import AreaList from '@/components/form/js/area'
import InjectTemplate from '@/components/inject-template.vue'
import { utils } from '@/components/utils/utils'
import { commonUtils } from '@/components/utils/common-utils'
import { reactive } from 'vue'
import { isHasOwnProperty } from '@/plugins/utils'

export default {
  name: "WbAddress",
  mixins: [utils, commonUtils],
  setup (props) {
    const state = reactive({
      isShowAddress: false,
      address: props.item.commonAttr.placeholder,
    })
    state.areaList = AreaList
    return state
  },
  components: {
    InjectTemplate,
  },
  computed: {
    adressStyles(){
      let style_ = this.styles;
      style_.padding = 0;
      return style_;
    }
  },
  mounted(){
    let arrowBtn = this.$el.getElementsByClassName('van-cell__right-icon')[0];
    if(isHasOwnProperty(this.commonAttr, "arrowBtnColor") && arrowBtn){
      arrowBtn.style.color = this.commonAttr.arrowBtnColor;
    }
  },
  methods: {
    onShowPopup() {
      this.isShowAddress = true;
    },
    setAreaModel(arr){
      let areaName = '';
      for (var i = 0; i < arr.length; i++) {
        areaName = areaName + ( i == 0 ? '' : '/') + arr[i].name
      }
      this.address = areaName
    },
    //确定选择城市
    onConfirm(arr){
      this.isShowAddress = false//关闭弹框
      this.setAreaModel(arr);

      let jumpUrl = "address"
      let comType = "click"
      let wModule = "jump"
      this.onPostStatics(null, { comType, wModule,  jumpUrl })
    },
    onCancel(){
      this.isShowAddress = false;
      this.$refs.myArea.reset();// 重置城市列表
    },
    updateFormValue(){
      this.$store.commit('updateFormValue', {id:this.item.id, value: this.address })
    },
  },
  watch: {
    address() {
      if(this.isH5Edit){
        return
      }
      this.updateFormValue()
    }
  },
};
</script>

<style lang="scss">
.wb-address {
  width: inherit;
  height: inherit;
  padding: 0;


  .van-cell__value--alone{

    span{
      padding: 0.14rem;
      display: inline-block;
      color: inherit;
    }
  }
}
</style>
